<template>
<!-- 产品销售排名 -->
  <div class="container-box">
    <!--筛选 -->
    <div class="form-box">
      <span>时间筛选：</span>
      <el-checkbox v-model="checkbox" @change="changeAllChecked()">全选</el-checkbox>
      <el-checkbox v-model="checkedNames">7天</el-checkbox>
      <el-checkbox v-model="checkedNames">30天</el-checkbox>
      <!-- 平台渠道 -->
      <div class="chekbox-css">
        <span>平台渠道：</span>
        <el-checkbox v-model="checked1">全选</el-checkbox>
        <el-checkbox v-model="checked11">Amazon</el-checkbox>
        <el-checkbox v-model="checked12">手工订单</el-checkbox>
      </div>
      <!-- 店铺账号 -->
      <div class="chekbox-css">
        <span>店铺账号：</span>
        <el-checkbox v-model="checked2">全选</el-checkbox>
        <el-checkbox v-model="checked21">陈俊煌k888999w@163.com（Amazon）</el-checkbox>
      </div>
    </div>
    <!-- 筛选统计 -->
    <div class="box-css">
      <div class="box1-css">
        <div class="box1-css-box1"><span>ASIN数</span></div>
        <div class="box1-css-box1"><span>销售数量</span></div>
        <div class="box1-css-box2"><span>销售总价</span></div>
        <div class="box1-css-box2"><span>退款数量</span></div>
        <div class="box1-css-box3"><span>退款金额</span></div>
      </div>
      <div class="box2-css">
        <div class="box2-css-box1"><span>1131</span></div>
        <div class="box2-css-box1"><span>1502</span></div>
        <div class="box2-css-box2"><span>$ 43883.08	</span></div>
        <div class="box2-css-box2"><span>$ 43883.08</span></div>
        <div class="box2-css-box3"><span>$ 200.99</span></div>
      </div>
    </div>
    <!-- 折线图 -->
    <div style="height: 330px;">
      <div id="main" style="height: 300px;"></div>
    </div>  
    <!-- 筛选后列表 -->
    <el-table
      :header-cell-style="tableHeaderColor"
      :data="tableData"
      size="mini"
      border
      style="width: 100%"
    >
      <el-table-column prop="" label="时间" width="256"></el-table-column>
      <el-table-column prop="" label="产品图片" width="300"></el-table-column>
      <el-table-column prop="" label="店铺" width="180"></el-table-column>
      <el-table-column prop="ASIN" label="ASIN" width="120"></el-table-column>
      <el-table-column prop="sell_numb" label="销售数量" width="120"></el-table-column>
      <el-table-column prop="title" label="标题" width="120"></el-table-column>
      <el-table-column prop="unit_price" label="平均价" width="120"></el-table-column>
      <el-table-column prop="amount_price" label="总价" width="120"></el-table-column>
    </el-table>
    <pagination
      @sendPageSize="receivePageSize"
      @sendCurrentPage="receiveCurrentPage"
      :totalPage="totalPage"
    ></pagination>
  </div>
</template>
<script>
import pagination from "common/pagination";
import echarts from 'echarts'
export default {
  data() {
    return {
      checked: false,
		  checkedNames: [],
		  checkedArr: ["7天", "30天"],
      charts: '',
      opinionData: ["310.6", "222.5", "400.3", "400", "500.7","700.9","600.9"],
      totalPage: '',
      tableData: [],
      checked1: true,
      checked11: false,
      checked12: false,
      checked2: true,
      checked21: false,
      checked3: true,
      checked31: false,
      checked32: false,
      value: "",
      input2: "",
      DateValue: ""
    };
  },
  methods: {
    receivePageSize(val) {
      console.log(val);
    },
    receiveCurrentPage(val) {
      console.log(val);
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #F7F6Fd;color: #B6B5C2;font-weight: 500;";
      }
    },
    //折线图
    drawLine(id){
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['产品销量']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
        saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ["产品A","产品B","产品C","产品D","产品E","产品F","产品G"]
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '产品销量',
        type: 'line',
        data: this.opinionData
      }]
    })
    },
    //勾选
    changeAllChecked: function() {
			if (this.checked) {
				this.checkedNames = this.checkedArr
			} else {
				this.checkedNames = []
			}
		}
  },
   //调用
  mounted() {
    this.$nextTick(function() {
        this.drawLine('main')
    })
  },
  watch: {
    DateValue(newval, oldval) {
      console.log(newval);
      console.log(oldval);
    },
    "checkedNames": function() {
			if (this.checkedNames.length == this.checkedArr.length) {
				this.checked = true
			} else {
				this.checked = false
			}
		}
  },
  components: {
    pagination
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";
.container-box {
  .form-box {
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    .chekbox-css{
    padding-top: 20px;
    }
  }
  .button-box {
    margin: 50px;
  }
  .box-css{
    height: 104px;
    padding: 10px 0px 0px 20px;
  }
  .box1-css{
    height: 34.4px;
    .box1-css-box1{
      width: 170.8px;
      height: 34.4px;
      float:left;
      line-height: 34.4px;
      text-align: right;
    }
    .box1-css-box2{
      width: 266.2px;
      height: 34.4px;
      float:left;
      line-height: 34.4px;
      text-align: right;
    }
    .box1-css-box3{
      width: 260.2px;
      height: 34.4px;
      float:left;
      line-height: 34.4px;
      text-align: right;
    }
  }
  .box2-css{
    height: 40px;
    .box2-css-box1{
      width: 170.8px;
      height: 40px;
      float:left;
      line-height: 40px;
      text-align: right;
      font-size: 16px;
      font-weight: 600;
      color: #434649;
    }
    .box2-css-box2{
      width: 266.2px;
      height: 40px;
      float:left;
      line-height: 40px;
      text-align: right;
      font-size: 16px;
      font-weight: 600;
      color: #434649;
    }
    .box2-css-box3{
      width: 260.2px;
      height: 40px;
      float:left;
      line-height: 40px;
      text-align: right;
      font-size: 16px;
      font-weight: 600;
      color: #434649;
    }
  }
}
</style>